En la creación de páginas web, el lenguaje HTML únicamente se encarga de estructurar el contenido. Cuando a ese contenido es necesario cambiarle la apariencia visual se utilizan hojas de estilos en cascada o CSS (Cascade Style Sheets).
El objetivo principal de las hojas de estilo es lograr una separación total entre el contenido y la estructura de su estilo de presentación.
Aunque el lenguaje HTML permite la inclusión de estilos en la propia creación del documento HTML, no se trata de una buena práctica.
El funcionamiento de las hojas de estilo permite definir la apariencia de una web en diferentes niveles:
A nivel local utiliza una sintaxis para realizar una modificación que solo afecta a un punto del documento (también llamado inline).
A nivel de página utilizando la cabecera.
A nivel de archivos externos (lo mas recomendable).
A la hora de trabajar con CSS tenemos que distinguir diferentes conceptos que guardan relación con el lenguaje HTML:
Identificadores: en HTML se define un atributo id para muchas etiquetas. Esto une el lenguaje HTML y los modificadores CSS.
Clases: Cuando se define un elemento con una clase CSS, el conjunto de etiquetas de esa clase comparten las mismas modificaciones CSS.
Pseudo-clases: Permiten clasificar a los elementos atendiendo al estado en el que se encuentren, o su posición jerárquica.
Pseudo-elementos: Son elementos que no tienen entidad propia pero pueden ser modificadores desde CSS.
En CSS se trabaja con reglas, a la cabecera de la regla se le llama selector.
Los selectores permiten especificar a qué elementos HTML se aplicará la regla CSS en cuestión.
Existen diferentes tipos de selectores dependiendo de cómo se declaren:
Universal: Utiliza el * como elemento distintivo y sus modificaciones se aplicarán a todos los elementos del documento HTML que utilice las modificaciones CSS.
De tipo o nombre de elemento: Se centra en cambiar la apariencia a una determinada etiqueta HTML para todas sus ocurrencias en el documento HTML.
Por combinación de elementos: Permite acotar el nombre de etiqueta HTML a modificar. Cuando hablamos de modificadores de tipo, los cambios afectan a todas las ocurrencias de ese tipo de etiqueta. Sin embargo, en los selectores por combinación se define qué conjunto de etiquetas modificar. Para ello existen algunas alternativas:
Ascendientes/Descendientes.
Padres/Hijos.
Hermanos.
Por clase o identificador de elemento: Se utilizan los atributos class e id del documento HTML. Es la forma más utilizada a la hora de modificar la apariencia de un elemento HTML.
Por pseudo-clase del elemento: Permiten clasificar los elementos utilizando el estado en el que se encuentran.
Por atributo del elemento: Se utiliza para aplicar una regla CSS cuando el atributo de un elemento HTML toma un determinado valor.
CSS3 introduce mejoras en CSS, ampliando y mejorando las funcionalidades existentes en la versión anterior.
Algunas de las mejoras introducidas son:
Notaciones para el color: permiten definir un color con máxima exactitud.
Bordes: redondeados, sombreados o con imagen.
Gradientes: partiendo de un mínimo de dos colores, se va cambiando alguna de las componentes del color.
Transformaciones: cambia a nivel geométrico cualquier elemento.
Transiciones: anima la visualización de un determinado elemento. La sintaxis depende del navegador que se esté utilizando.
Transparencia: se puede aplicar sobre prácticamente cualquier elemento.